<template>
    <div>
      <van-cell class="spaceDiv" @click="ref(id)">
        <!-- 标题区域的插槽 -->
        <template #title>
          <div class="title-box">
            <!-- 标题 -->
            <span>停车场名称:{{ name }}</span>
            
          </div>
          <div>
            <span>停车场描述：{{ des }}</span>
          </div>
          <!-- 三张图片 -->
          <div class="thumb-box">
            <ul>
                <li>停车位总数:{{ park_total }}</li>
                <li>空闲车位数量:{{ park_re_quatity }}</li>
                <li>单价:{{ unit_price }}</li>
            </ul>
            <ul style="padding-right: 30%;">
                <li>充电桩总数量:{{ charg_total }}</li>
                <li>充电桩可用数量:{{ charg_re_quatity }}</li>
            </ul>
          </div>
        </template>
      </van-cell>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SpaceComponent',
    // 自定义属性
    props: {
      // 文章的标题
      name: {
        type: String,
        default: ''
      },
      // 作者名字
      park_total: {
        type: String,
        default: ''
      },
      // 评论数
      park_re_quatity: {
        // 通过数组形式，为当前属性定义多个可能的类型
        type: String,
        default: ''
      },
      // 发布日期
      unit_price: {
        type: String,
        default: ''
      },
      // 封面的信息对象
      charg_total: {
        type: String,
        default: ''
      },
      charg_re_quatity: {
        type: String,
        default: ''
      },
      des: {
        type: String,
        default: ''
      },
      id: {
        type: String,
        default: ''
      },
      isSuccess:true
    },
    methods: {
        async ref(id){
            console.log(id)
            await this.$router.push(`/space/${id}`)
        }
    }
  }
  </script>
  
  <style lang="less" scoped>
  .label-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .thumb {
    // 矩形黄金比例：0.618
    width: 113px;
    height: 70px;
    background-color: #f8f8f8;
    object-fit: cover;
  }
  
  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .thumb-box {
    display: flex;
    justify-content: space-between;
  }

  .spaceDiv {
    box-shadow:0px 0px 1px #000;
    margin-top: 10px;
    border-radius: 15px 15px 15px 15px;
    background-color: #FFF8DC;
  }
  
  </style>
  